<template>
  <!-- 设备监看 -->
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item v-if="this.$store.state.user.fsiteLevel==3" label="客户名称">
        <el-select
          disabled
          v-model="listQuery.fsiteNo"
          clearable
          filterable
          class="filter-item"
          placeholder="请选择客户名称"
        >
          <el-option
            v-for="item in fsiteNoBelongOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-else label="客户">
        <el-select
          v-model="listQuery.fsiteNo"
          clearable
          filterable
          class="filter-item"
          placeholder="请选择客户名称"
        >
          <el-option
            v-for="item in fsiteNoBelongOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <!-- v-permission="['scene:scenario:read']" -->
        <el-button
          :style="{background:buttonColor.lookup,color:buttonColor.color}"
          round
          size="medium"
          class="filter-item"
          @click="handleFilter"
        >查找</el-button
        >
        <!-- v-permission="['scene:scenario:create']" -->
        <el-button
          :style="{background:buttonColor.add,color:buttonColor.color}"
          round
          size="medium"
          class="filter-item"
          @click="handleCreate"
        >添加</el-button
        >
      </el-form-item>
    </el-form>
    <!--<el-select v-model="listQuery.fscenetype" clearable class="filter-item" placeholder="请选择场景类型">
        <el-option v-for="(key, value) in fscenetypeMap" :key="key" :label="key" :value="value"/>
      </el-select>-->

    <!-- 查询结果 -->
    <el-table
      :height="buttonColor.clientHeight"
      v-loading="listLoading"
      :data="list"
      :header-cell-style="tableColor"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
    >
      <el-table-column :width="buttonColor.operationTwo" align="center" label="操作" class-name="small-padding">
        <template slot-scope="scope">
          <div class="operationButton">
            <div :style="{color:buttonColor.edit,cursor:'pointer'}" @click="handleUpdate(scope.row)">
              <img src="../../../public/images/edit.png" >
              编辑
            </div>
            <div :style="{color:buttonColor.delete,cursor:'pointer'}" @click="handleDelete(scope.row)">
              <img src="../../../public/images/del.png" >
              删除
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        :index="indexMethod"
        align="center"
        label="序"
        type="index"
      />
      <el-table-column align="center" label="编号" prop="fmonitorno" />
      <el-table-column
        :formatter="formatSite"
        align="center"
        label="客户名称"
        prop="fsiteNo"
      />
      <el-table-column align="center" label="类型" prop="ftype">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.ftype | frangeFilter }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="right" label="描述" prop="fdescribe" />
      <el-table-column align="right" label="开始时间" prop="begintime" />
      <el-table-column align="right" label="结束时间" prop="endtime" />
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <!-- 添加或修改对话框 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
      width="auto"
      top="0vh"
    >
      <template slot="title">
        <div :style="titleColor">{{ textMap[dialogStatus] }}</div>
      </template>
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="dataForm"
        status-icon
        label-position="left"
        label-width="auto"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item class="required" v-if="this.$store.state.user.fsiteLevel==3" label="客户名称" prop="fsiteNo">
              <el-select
                v-model="dataForm.fsiteNo"
                disabled
                clearable
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in fsiteNoBelongOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item class="required" v-else label="客户名称" prop="fsiteNo">
              <el-select
                v-model="dataForm.fsiteNo"
                :disabled="dialogStatus == 'update'"
                clearable
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in fsiteNoBelongOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              class="el-form-item-small required"
              label="类型"
              prop="ftype"
            >
              <el-select
                v-model="dataForm.ftype"
                class="filter-item"
                placeholder="请选择类型"
              >
                <el-option
                  v-for="(key, value) in frangeMap"
                  :key="key"
                  :label="key"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              class="required"
              label="描述"
              prop="fdescribe"
            >
              <el-input placeholder="请输入描述" v-model="dataForm.fdescribe" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              class="el-form-item-small required"
              label="开始时间"
              prop="begintime"
            >
              <el-select
                v-model="dataForm.begintime"
                class="filter-item"
                placeholder="请选择开始时间"
              >
                <el-option
                  v-for="(key, value) in ftimeMap"
                  :key="key"
                  :label="key"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              class="el-form-item-small required"
              label="结束时间"
              prop="endtime"
            >
              <el-select
                v-model="dataForm.endtime"
                class="filter-item"
                placeholder="请选择结束时间"
              >
                <el-option
                  v-for="(key, value) in ftimeMap"
                  :key="key"
                  :label="key"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-tabs type="border-card">
        <el-tab-pane label="设备列表">
          <div class="filter-container">
            <el-button
              :style="{background:buttonColor.add,color:buttonColor.color}"
              round
              size="medium"
              class="filter-item"
              @click="handleUpdate1"
            >添加设备</el-button
            ><!--handleCreate-->
            <el-table
              v-loading="listLoading"
              :data="dataForm.sTsEquipments"
              :header-cell-style="tableColor"
              element-loading-text="正在查询中。。。"
              border
              fit
              highlight-current-row
              height="30vh"
            >
              <el-table-column
                :index="indexMethod"
                align="center"
                label="序"
                type="index"
              />
              <el-table-column
                :formatter="formatEqt"
                align="center"
                label="设备"
                prop="fequipmenttype"
              />
              <el-table-column align="center" label="电源状态" prop="fpowerstatus">
                <template slot-scope="scope">
                  <el-tag>{{ scope.row.fpowerstatus | fpowerFilter }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                width="140"
                label="操作"
                class-name="small-padding"
              >
                <template slot-scope="scope">
                  <el-button
                    :style="{background:buttonColor.delete,color:buttonColor.color}"
                    round
                    size="small"
                    @click="handleDelete1(scope.row)"
                  >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="实验室列表">
          <div class="filter-container">
            <el-button
              :style="{background:buttonColor.add,color:buttonColor.color}"
              round
              size="medium"
              class="filter-item"
              @click="handleUpdate2(dataForm.fsiteNo)"
            >添加实验室</el-button
            >
            <el-table
              v-loading="listLoading"
              :data="dataForm.atsPoints"
              :header-cell-style="tableColor"
              element-loading-text="正在查询中。。。"
              border
              fit
              highlight-current-row
              height="30vh"
            >
              <el-table-column
                :index="indexMethod"
                align="center"
                label="序"
                type="index"
              />
              <el-table-column
                :formatter="formatPoint"
                align="center"
                label="实验室名称"
                prop="fpointNo"
              />
              <el-table-column
                align="center"
                width="140"
                label="操作"
                class-name="small-padding"
              >
                <template slot-scope="scope">
                  <el-button
                    :style="{background:buttonColor.delete,color:buttonColor.color}"
                    round
                    size="small"
                    @click="handleDelete2(scope.row)"
                  >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button round :style="{background:buttonColor.cancel,color:buttonColor.colorone}" @click="cancelData">取消</el-button>
        <el-button
          round
          v-if="dialogStatus == 'create'"
          :style="{background:buttonColor.confirm,color:buttonColor.color}"
          @click="createData"
        >确定</el-button
        >
        <el-button round v-else :style="{background:buttonColor.confirm,color:buttonColor.color}" @click="updateData">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible1"
      width="auto"
    >
      <template slot="title">
        <div :style="titleColor">{{ textMap[dialogStatus] }}</div>
      </template>
      <el-form
        ref="dataForm1"
        :rules="rules"
        status-icon
        label-position="left"
        label-width="auto"
        style="width: 400px; margin:0 30px"
      >
        <el-form-item
          class="el-form-item-small"
          label="设备类型"
          prop="fequipmenttype"
        >
          <el-select
            v-model="feuipment"
            class="filter-item"
            placeholder="请选择设备类型"
          >
            <el-option
              v-for="item in sTsEquipmentDictOptions"
              :key="item.value"
              :label="item.label"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          class="el-form-item-small"
          label="电源状态"
          prop="fpowerstatus"
        >
          <el-select
            v-model="action"
            class="filter-item"
            placeholder="请选择电源状态"
          >
            <el-option
              v-for="(key, value) in fpowerMap"
              :key="key"
              :label="key"
              :value="value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button round :style="{background:buttonColor.cancel,color:buttonColor.colorone}" @click="dialogFormVisible1 = false">取消</el-button>
        <el-button round :style="{background:buttonColor.confirm,color:buttonColor.color}" @click="addData">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible2"
      width="auto"
    >
      <template slot="title">
        <div :style="titleColor">{{ textMap[dialogStatus] }}</div>
      </template>
      <el-form
        ref="dataForm2"
        :rules="rules"
        :model="dataForm"
        status-icon
        label-position="left"
        label-width="auto"
        style="width: 400px; margin:0 30px"
      >
        <el-table
          ref="multipleTable"
          :data="atsPoints"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange2"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="fpointNo" label="实验室编号" width="120" />
          <el-table-column
            prop="fpointName"
            label="实验室名称"
            show-overflow-tooltip
          />
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button round :style="{background:buttonColor.cancel,color:buttonColor.colorone}" @click="dialogFormVisible2 = false">取消</el-button>
        <el-button round :style="{background:buttonColor.confirm,color:buttonColor.color}" @click="addData2">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listmonitorHead,
  createmonitorHead,
  updatemonitorHead,
  deletemonitorHead
} from '@/api/monitorHead'
import {
  eqtActions
} from '@/api/scenario'
import { fsiteOptionsByLevel, sTsEquipmentDictOptions } from '@/api/area'
import {
  listPointByFsiteNo,
  listPointByFsiteNo2
} from '@/api/airAlarm'
import Pagination from '@/components/Pagination'
import moment from 'moment/moment'
import { tableColor, titleColor, buttonColor } from '@/filters/index'

const frangeMap = {
  1: '假期',
  2: '工作日'
}

const fpowerMap = {
  0: '关',
  1: '开'
}

const ftimeMap = {
  0: '0',
  1: '1',
  2: '2',
  3: '3',
  4: '4',
  5: '5',
  6: '6',
  7: '7',
  8: '8',
  9: '9',
  10: '10',
  11: '11',
  12: '12',
  13: '13',
  14: '14',
  15: '15',
  16: '16',
  17: '17',
  18: '18',
  19: '19',
  20: '20',
  21: '21',
  22: '22',
  23: '23'
}

export default {
  name: 'Alarm',
  components: { Pagination },
  filters: {
    frangeFilter(type) {
      return frangeMap[type]
    },
    fpowerFilter(type) {
      return fpowerMap[type]
    }
  },
  data() {
    return {
      buttonColor: buttonColor,
      listTmp: [],
      multipleSelection: [],
      multipleSelection2: [],
      multiple2: [],
      list: null,
      total: 0,
      fsiteNoBelongOptions: null,
      sTsEquipmentsTmp: [],
      atsPointsTmp: [],
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        fsiteNo: undefined,
        sort: 'create_time',
        order: 'desc'
      },
      frangeMap,
      ftimeMap,
      fpowerMap,
      dataForm: {
        fmonitorno: undefined,
        ftype: undefined,
        fdescribe: undefined,
        begintime: undefined,
        endtime: undefined,
        fgetdate: undefined,
        foperator: undefined,
        fsiteNo: undefined,
        sTsEquipments: [],
        atsPoints: []
      },
      feuipment: '',
      action: null,
      sTsEquipmentDictOptions: [],
      eqtActionOptions: [],
      atsPoints: [],
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible3: false,
      dialogFormVisible2: false,
      dialogFormVisible4: false,
      dialogStatus: '',
      dialogStatus1: '',
      dialogStatus2: '',
      textMap: {
        update: '编辑',
        create: '创建'
      },
      tableColor: tableColor,
      titleColor: titleColor,
      rules: {
        fsiteNo: [
          { required: true, message: '客户名称不能为空', trigger: 'blur' }
        ],
        ftype: [
          { required: true, message: '类型不能为空', trigger: 'blur' }
        ],
        fdescribe: [
          { required: true, message: '描述不能为空', trigger: 'blur' }
        ],
        begintime: [
          { required: true, message: '开始时间不能为空', trigger: 'blur' }
        ],
        endtime: [
          { required: true, message: '结束时间不能为空', trigger: 'blur' }
        ]
      },
      permissionDialogFormVisible: false,
      systemPermissions: null,
      assignedPermissions: null,
      permissionForm: {
        roleId: undefined,
        permIds: []
      }
    }
  },
  created() {
    if (this.$store.state.user.fsiteLevel == 3) {
      this.listQuery.fsiteNo = this.$store.state.user.fsiteNo
    }
    this.getList()
    fsiteOptionsByLevel(3)
      .then((response) => {
        this.fsiteNoBelongOptions = response.data.data.list
      })
      .catch(() => {
        this.fsiteNoBelongOptions = []
      })
  },
  methods: {
    formatStatus: function(row, column) {
      return row.fsiteState === 1 ? '启用' : '禁用'
    },
    dateFormat(row, column) {
      const date = row[column.property]
      if (date === undefined || date === null || date === '') {
        return ''
      }
      return moment(date).format('HH:mm:ss')
    },
    formatSite: function(row, column) {
      for (let i = 0; i < this.fsiteNoBelongOptions.length; i++) {
        if (row.fsiteNo === this.fsiteNoBelongOptions[i].value) {
          return this.fsiteNoBelongOptions[i].label
        }
      }
      return ''
    },
    formatPoint: function(row, column) {
      for (let i = 0; i < this.atsPoints.length; i++) {
        if (row.fpointNo === this.atsPoints[i].fpointNo) {
          return this.atsPoints[i].fpointName
        }
      }
      return ''
    },
    formatEqt: function(row, column) {
      for (let i = 0; i < this.sTsEquipmentDictOptions.length; i++) {
        if (row.fequipmenttype === this.sTsEquipmentDictOptions[i].value) {
          return this.sTsEquipmentDictOptions[i].label
        }
      }
      return ''
    },
    handleSelectionChange2(val) {
      this.multipleSelection2 = val
    },
    /* getEqtActions(feuipment) {
      this.eqtActionOptions = [];
      this.action = "";
      eqtActions(feuipment.value)
        .then((response) => {
          this.eqtActionOptions = response.data.data.list;
        })
        .catch(() => {
          this.eqtActionOptions = [];
        });
    },*/
    addData() {
      this.dialogFormVisible1 = false
      for (var i in this.dataForm.sTsEquipments) {
        var eqt = this.dataForm.sTsEquipments[i]
        if (
          eqt.fequipmenttype === this.feuipment.value &&
          eqt.fpowerstatus === this.action
        ) {
          return
        }
      }
      this.dataForm.sTsEquipments.push({
        fequipmenttype: this.feuipment.value,
        // feuipmentname: this.feuipment.label,
        fpowerstatus: parseInt(this.action)
        // finstructions: this.action.label,
      })
    },
    addData2() {
      this.dialogFormVisible2 = false
      for (var i in this.multipleSelection2) {
        var atsPoint = this.multipleSelection2[i]
        var canAdd = true
        for (var j in this.dataForm.atsPoints) {
          if (atsPoint.fpointNo === this.dataForm.atsPoints[j].fpointNo) {
            canAdd = false
            break
          }
        }
        if (canAdd) {
          atsPoint.fwarringno = this.dataForm.fwarringno
          this.dataForm.atsPoints.push(atsPoint)
          this.multiple2.push(atsPoint)
        }
      }
    },
    cancelData() {
      this.list.forEach((v) => {
        if (v.fmonitorno === this.dataForm.fmonitorno) {
          this.dataForm = this.listTmp
          this.dataForm.sTsEquipments = this.sTsEquipmentsTmp
          this.dataForm.atsPoints = this.atsPointsTmp
          const index = this.list.indexOf(v)
          this.list.splice(index, 1, this.dataForm)
          this.dialogFormVisible = false
          return
        }
      })
      this.dialogFormVisible = false
    },
    // 弹窗点击关闭前的回调
    handleClose() {
      this.list.forEach((v) => {
        if (v.fmonitorno === this.dataForm.fmonitorno) {
          this.dataForm = this.listTmp
          this.dataForm.sTsEquipments = this.sTsEquipmentsTmp
          this.dataForm.atsPoints = this.atsPointsTmp
          const index = this.list.indexOf(v)
          this.list.splice(index, 1, this.dataForm)
          this.dialogFormVisible = false
          return
        }
      })
      this.dialogFormVisible = false
    },
    formatDate(fexectime) {
      if (fexectime == null) {
        return null
      } else {
        var strs = fexectime.split(' ')
        var dateStr =
          'Jan 01 ' + strs[1] + ':' + strs[0] + ':00 CST 1970 GMT+0800'
        return new Date(dateStr)
      }
    },
    getList() {
      this.listLoading = true
      listmonitorHead(this.listQuery)
        .then((response) => {
          this.list = response.data.data.list
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    resetForm() {
      this.dataForm = {
        id: undefined,
        fmonitorno: undefined,
        fsiteNo: undefined,
        ftype: undefined,
        fdescribe: undefined,
        begintime: undefined,
        endtime: undefined,
        fgetdate: undefined,
        foperator: undefined,
        sTsEquipments: [],
        // eqtActionOptions: [],
        atsPoints: []
      }
    },
    handleCreate() {
      this.resetForm()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.dataForm.fscenetype = '2'
      if (this.$store.state.user.fsiteLevel == 3) {
        this.dataForm.fsiteNo = this.$store.state.user.fsiteNo
      }
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          createmonitorHead(this.dataForm)
            .then((response) => {
              this.list.unshift(response.data.data)
              this.dialogFormVisible = false
              this.$notify.success({
                title: '成功',
                message: '添加设备监看成功'
              })
            })
            .catch((response) => {
              this.$notify.error({
                title: '失败',
                message: response.data.msg
              })
            })
        }
      })
    },
    handleUpdate(row) {
      this.listTmp = row
      // abc
      this.dataForm = Object.assign({}, row)
      // this.dataForm.fscenetype = row.fscenetype.toString()
      // this.dataForm.sTsEquipmentsTmp = row.sTsEquipments
      // this.dataForm.atsPointsTmp = row.atsPoints
      this.sTsEquipmentsTmp = []
      this.atsPointsTmp = []
      row.sTsEquipments.forEach((v) => {
        this.sTsEquipmentsTmp.push(v)
      })
      row.atsPoints.forEach((v) => {
        this.atsPointsTmp.push(v)
      })
      this.dataForm.ftype = this.dataForm.ftype.toString()
      listPointByFsiteNo(this.dataForm.fsiteNo)
        .then((response) => {
          this.atsPoints = response.data.data.list
        })
        .catch(() => {
          this.atsPoints = []
        })
      sTsEquipmentDictOptions()
        .then((response) => {
          // this.sTsEquipmentDictOptions = response.data.data.list
          this.sTsEquipmentDictOptions = []
          // var equipmentDict = []
          for (const equipmentDict of response.data.data.list) {
            if (equipmentDict.value !== 1 && equipmentDict.value !== 2) {
              // 非单插和三插
              this.sTsEquipmentDictOptions.push(equipmentDict)
            }
          }
        })
        .catch(() => {
          this.sTsEquipmentDictOptions = []
        })
      // if (row.fscenetype === 2) {
      //   this.dataForm.fexecweekList = []
      // }
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleUpdate1() {
      sTsEquipmentDictOptions()
        .then((response) => {
          // this.sTsEquipmentDictOptions = response.data.data.list
          this.sTsEquipmentDictOptions = []
          // var equipmentDict = []
          for (const equipmentDict of response.data.data.list) {
            if (equipmentDict.value !== 1 && equipmentDict.value !== 2) {
              // 非单插和三插
              this.sTsEquipmentDictOptions.push(equipmentDict)
            }
          }
        })
        .catch(() => {
          this.sTsEquipmentDictOptions = []
        })
      this.dialogStatus1 = 'update'
      this.dialogFormVisible1 = true
      this.feuipment = ''
      this.eqtActionOptions = []
      this.action = ''
      this.$nextTick(() => {
        this.$refs['dataForm1'].clearValidate()
      })
    },
    handleUpdate3() {
      sTsEquipmentDictOptions()
        .then((response) => {
          // this.sTsEquipmentDictOptions = response.data.data.list
          this.sTsEquipmentDictOptions = []
          // var equipmentDict = []
          for (const equipmentDict of response.data.data.list) {
            if (equipmentDict.value !== 1 && equipmentDict.value !== 2) {
              // 非单插和三插
              this.sTsEquipmentDictOptions.push(equipmentDict)
            }
          }
        })
        .catch(() => {
          this.sTsEquipmentDictOptions = []
        })
      this.dialogStatus1 = 'update'
      this.dialogFormVisible3 = true
      this.feuipment = ''
      this.eqtActionOptions = []
      this.action = ''
      this.$nextTick(() => {
        this.$refs['dataForm1'].clearValidate()
      })
    },
    handleUpdate2(fsiteNo) {
      if (fsiteNo == null) {
        this.$notify.info({
          title: '',
          message: '请先选择客户'
        })
        return
      }
      listPointByFsiteNo(fsiteNo)
        .then((response) => {
          this.atsPoints = response.data.data.list
        })
        .catch(() => {
          this.atsPoints = []
        })
      this.dialogStatus2 = 'update'
      this.dialogFormVisible2 = true
      this.multipleSelection2 = []
      this.$nextTick(() => {
        this.$refs['dataForm2'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          updatemonitorHead(this.dataForm, this.$route.query.id)
            .then(() => {
              for (const v of this.list) {
                if (v.fmonitorno === this.dataForm.fmonitorno) {
                  const index = this.list.indexOf(v)
                  this.list.splice(index, 1, this.dataForm)
                  break
                }
              }
              this.dialogFormVisible = false
              this.$notify.success({
                title: '成功',
                message: '更新设备监看成功'
              })
            })
            .catch((response) => {
              this.$notify.error({
                title: '失败',
                message: response.data.msg
              })
            })
        }
      })
    },
    handleDelete(row) {
      this.$confirm('是否要删除该设备监看', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletemonitorHead(row)
          .then((response) => {
            this.$notify.success({
              title: '成功',
              message: '删除设备监看成功'
            })
            const index = this.list.indexOf(row)
            this.list.splice(index, 1)
          })
          .catch((response) => {
            this.$notify.error({
              title: '失败',
              message: response.data.msg
            })
          })
      })
    },
    handleDelete1(row) {
      const index = this.dataForm.sTsEquipments.indexOf(row);
      this.dataForm.sTsEquipments.splice(index, 1);
    },
    handleDelete2(row) {
      const index = this.dataForm.atsPoints.indexOf(row);
        this.dataForm.atsPoints.splice(index, 1);
    },
    indexMethod(index) {
      index = index + 1
      return index
    }
  }
}
</script>
